<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>myshop</title>
    <link href="/index.css" type="text/css" rel="stylesheet"/>
    <link href="/others/zui/dist/css/zui.css" rel="stylesheet">
    <script type="text/javascript" src="/others/jquery-2.1.4/jquery.js"></script>
    <script type="text/javascript" src="/others/zui/dist/js/zui.js"></script>
    <script type="text/javascript" src="/index.js"></script>

</head>
<body >
    <div class="background" >
            <nav class="navbar navbar-default" role="navigation">
                <div class="collapse navbar-collapse navbar-collapse-example">
                    <!-- 一般导航项目 -->
                    <ul class="nav navbar-nav" style="width: 100%">
                        <li><a href="your/nice/url">主页</a></li>
                        <li><a href="your/nice/url">帮助</a></li>
                        <li><a href="your/nice/url">购物车</a></li>
                        <li><a href="your/nice/url">收藏夹</a></li>
                        <li><a href="your/nice/url">联系我们</a></li>

                        <li class="top_weather" style="height: 40px;width: 500px;padding-left: 120px">

                        </li>
                        <li class="collapse navbar-collapse navbar-collapse-example">
                            <!-- 导航中的表单 -->
                            <form class="navbar-form navbar-left" role="search">
                                <div class="form-group">
                                    <input type="text" style="width: 400px" class="form-control" placeholder="搜索">
                                </div>
                                <button type="submit" class="btn btn-default">搜索</button>
                            </form>
                        </li>
                        <ul class="nav navbar-nav" style="float:right" id="login_ul">
                               <button type="button" class="btn btn-lg btn-primary" data-toggle="modal" data-target="#myModal">直接登陆</button>
                               <button type="button" class="btn btn-lg btn-primary" onclick="javascrtpt:window.location.href='./user/html/create.html'">注册</button>
                        </ul>
                    </ul>
                </div>
            </nav>
        <div class="body">
            <div class="body_comm_class">
                <div class="btn-group">
                    <button class="btn" id="com_class">随机推荐</button>
                    <button class="btn" id="com_class0">零食类</button>
                    <button class="btn" id="com_class1">日用品类</button>
                    <button class="btn" id="com_class2">烟酒类</button>
                    <button class="btn" id="com_class3">饮料类</button>
                    <button class="btn" id="com_classother">其他类</button>
                </div>
            </div>
            <div class="body_img"></div>
            <div class="body_content">总的内容</div>
        </div>

        <div class="bottom">
            <div class="bottom_content">网站其他链接</div>
                <nav class="navbar navbar-default" role="navigation" style="padding-bottom: 0">
                    <ul class="nav navbar-nav nav-justified">
                        <li><a>负责人：胡振</a></li>
                        <li><a>前端：何求，褚博</a></li>
                        <li><a>后端：胡振，肖聪</a></li>
                    </ul>
                </nav>
        </div>
    </div>
    <div class="modal fade" id="myModal">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">关闭</span></button>
                    <h4 class="modal-title">登陆</h4>
                </div>
                <div class="modal-body">
                    <form class="form-horizontal form-condensed" role="form" id="login">
                        <legend>账户登陆</legend>
                            <div class="form-group"><label class="col-md-2 control-label">账户：</label><div class="col-md-4"><input type='text' name='accounts' value='' class="form-control" placeholder="账户："/></div><i class="tishi"></i></div>
                            <div class="form-group"><label class="col-md-2 control-label">密码：</label><div class="col-md-4"><input type='password' name='password' value='' class="form-control" placeholder="密码："/></div><i class="tishi"></i></div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-primary" data-dismiss="modal" onclick="login()">登陆</button>
                    <button type="button" class="btn btn-primary" onclick="javascrtpt:window.location.href='./user/html/create.html'">注册</button>
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                </div>
            </div>
        </div>
    </div>
    <script type="text/javascript">
        function findWeather() {
            var cityUrl = 'http://int.dpool.sina.com.cn/iplookup/iplookup.php?format=js';
            $.getScript(cityUrl, function(script, textStatus, jqXHR) {
                var citytq = remote_ip_info.city ;// 获取城市
                var url = "http://php.weather.sina.com.cn/iframe/index/w_cl.php?code=js&city=" + citytq + "&day=0&dfc=3";
                var days={
                    0:"天",
                    1:"一",
                    2:"二",
                    3:"三",
                    4:"四",
                    5:"五",
                    6:"六",
                }
                $.ajax({
                    url : url,
                    dataType : "script",
                    scriptCharset : "gbk",
                    success : function(data) {
                        var _w = window.SWther.w[citytq][0];
                        var _f= _w.f1+"_0.png";
                        if(new Date().getHours() > 17){
                            _f= _w.f2+"_1.png";
                        }
                        var img = "<img width='16px' height='16px' src='http://i2.sinaimg.cn/dy/main/weather/weatherplugin/wthIco/20_20/" +_f
                                + "' />";

                        /*var tq = citytq + " " + img + " " + _w.s1 + " " + _w.t1 + "℃～" + _w.t2 + "℃  " + _w.d1 + _w.p1 + "级";*/
                        var tq= '<span>'+citytq+'</span>'+'<span>'+ _w.s1+'</span>'+'<span>'+ _w.t1 + "℃～" + _w.t2 + "℃  "+'</span>'
                        var myDate = new Date();
                        tq+= '<span>'+(myDate.getMonth()+1)+'月'+myDate.getDate()+'日'+'</span>'+'<span>'+'星期'+days[myDate.getDay()]+'</span>'
                        $('.top_weather').html(tq);

                    }
                });
            });
        }
        findWeather()
        check_user()
        var json_msg
        $.ajax({
            type: "POST",
            url: "/app/sc/cdList",
            success: function(data){
                json_msg=eval('(' + data + ')');
                loadcoms("all")
            }
        });
        function loadcoms(com_class){
            for (var x in json_msg.data) {
                if(com_class=="all"){
                    $(".body_img").append(
                            '<a class="com_img_btn" id="'+json_msg.data[x].id+'">'+
                            '<div class="com_img">'+
                            '<img src="/img/comimg/'+json_msg.data[x].id+'.jpg" alt="'+json_msg.data[x].name+'" >'+
                            '</div>'+
                            '<p class="com_name">'+json_msg.data[x].name+'</p>'+
                            '<p class="com_price">'+
                            '<i>库存： </i>'+json_msg.data[x].stock+
                            '<i>价格： </i>'+json_msg.data[x].price+
                            ' </p>'+
                            ' <button class="btn btn-primary">加入购物车</button>'+
                            '</a>');
                }
                else{
                    if (json_msg.data[x].com_class==com_class){
                        $(".body_img").append(
                                '<a class="com_img_btn" id="'+json_msg.data[x].id+'">'+
                                '<div class="com_img">'+
                                '<img src="/img/comimg/'+json_msg.data[x].id+'.jpg" alt="'+json_msg.data[x].name+'" >'+
                                '</div>'+
                                '<p class="com_name">'+json_msg.data[x].name+'</p>'+
                                '<p class="com_price">'+
                                '<i>库存： </i>'+json_msg.data[x].stock+
                                '<i>价格： </i>'+json_msg.data[x].price+
                                ' </p>'+
                                ' <button class="btn btn-primary">加入购物车</button>'+
                                '</a>');
                    }
                }
            }
		var buys=document.querySelectorAll(".com_img_btn")
                    for(var i=0;i<buys.length;i++){
                    buys[i].onclick=function(){
                            if(is_login){
                                var id=this.getAttribute('id')
                                window.open('/buy/buy.html?id='+id)
                            }else {
                                alert("请先登录，然后才能购买")
                            }
                    }
        }
        }
        $(".btn-group button").on("mouseover", function(){
            $(".body_img").empty();
            if(this.id=="com_class"){
                loadcoms("all")
                return
            }else if(this.id=="com_classother"){
                loadcoms("all")
                return
            }
            else {
             var coms_class=this.id.slice(9)
                loadcoms(coms_class)
            }
        })

    </script>
</body>
</html>
